<template>
    <div id="app">
        <div class="navigation">
            <ul>
                <li><RouterLink to="/propsfather">propsfather</RouterLink></li>
                <li><RouterLink to="/eventfather">propsfather</RouterLink></li>
                <li><RouterLink to="/mittfather">mittfather</RouterLink></li>
                <li><RouterLink to="/v_modelfather">v_modelfather</RouterLink></li>
                <li><RouterLink to="/_$attrs">_$attrs</RouterLink></li>
                <li><RouterLink to="/_$refs_$parent">_$refs_$parent</RouterLink></li>
                <li><RouterLink to="/provide_inject">provide_inject</RouterLink></li>
                <li><RouterLink to="/slot">slot</RouterLink></li>
                <li><RouterLink to="/scopeSlot">scopeSlot</RouterLink></li>
            </ul> 
        </div>
        <div class="content">
            记忆力:{{person.Memory}} <br> 智力:{{person.Intelligence.Effort}} <br>
            <br> 拷贝之后：<br>
            记忆力:{{person.Memory}} <br> 智力:{{person.Intelligence.Effort}} <br>
            <button @click="changePerson">增加努力</button>
            <button @click="changePersonClone">增加努力Clone</button>
            <button @click="changeCar">修改车价</button>
            <button @click="changeCar2">修改车价,ref不希望被显示/修改</button>
            <br> say:{{say}}
            <input type="text" v-model="say">
            <RouterView></RouterView>
             <div class="out">
                <Model></Model>
             </div>
             <div class="SuspenseStyle">
                父组件 
                <br>
                <Suspense>
                    <template v-slot:default>
                        <SuspenseTest></SuspenseTest>
                    </template>           
                    <template v-slot:fallback>
                        <h1>加载中。。。</h1>
                    </template>           
                </Suspense>
             </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref,shallowRef,shallowReactive,readonly,shallowReadonly,toRaw,markRaw, onMounted, customRef} from 'vue';
import mockjs from 'mockjs';
import { RouterLink,RouterView } from 'vue-router';
import useMsgRef from '@/hooks/useMsgRef.ts';
import Model from './views/Model.vue';
import { Suspense } from 'vue';
import SuspenseTest from './views/SuspenseTest.vue';

//从useMsgRef上结构对象
let {say} = useMsgRef("lxy",3000);
let person = ref({
    Memory:100,
    Intelligence:{
        Effort:150,
    },
})

let person2 = shallowReadonly(person);

let car = shallowReactive({
    name:'奔驰',
    money:{
        increat:1000,
    }
})

//markRaw: ★ 把对象标记为原始对象，不会被代理，不会被追踪
let mockjsData = markRaw(mockjs);

onMounted(()=>{
    console.log("mockjsData = ",mockjsData)
    // console.log("student = ",student)
})

//toRaw: ★ 把readonly 转回原始对象，可以修改
let car2 = toRaw(car);

//car赋值新值,从上到下累加
let car3 = {name:'宝马',money:{increat:3000}}
car3.money.increat += 1; 
car3.money.increat += 1; 
car3.money.increat += 1; 

onMounted(()=>{
    console.log("car3 = ",car3)
})

function changeCar2(){
    console.log(car2)
}
function changePerson(){
    person.value.Intelligence.Effort += 1;
}

//readonly:深度clone ★
//shallowReadonly:浅拷贝，value.xxx 可以被修改 ★
function changePersonClone(){
    person2.value.Intelligence.Effort += 6;
}

function changeCar(){
    //一级 .value. 二级
    car.value.money.increat += 1000;
}
</script>
<style>
.navigation{
    width:20vw;
    height: 100vh;
    position: fixed;
    background-color: rgb(162, 168, 168);
}
.content{
    width:70vw;
    height: 100vh;
    position: absolute;
    left:20vw;
}
.out{
    background-color: rgb(180, 180, 133);
    width: 100vw;
    height: 100vh;
    /* position: fixed;样式没效果 */
    filter:saturate(100%);
}

.SuspenseStyle{
    background-color: blueviolet;
    width: 100vw;
    height: 100vh;
}
</style>